<template>
  <div>
    <!-- 轮播图 -->
    <cube-slide ref="slide" :data="items" @change="changePage">
      <cube-slide-item v-for="(item, index) in items" :key="index" @click.native="clickHandler(item, index)">
        <a :href="item.url">
          <img :src="item.image">
        </a>
      </cube-slide-item>
      <template slot="dots" slot-scope="props">
        <span class="my-dot" :class="{active: props.current === index}" v-for="(item, index) in props.dots" :key="index"></span>
      </template>
    </cube-slide>
    <!-- 轮播图获取失败提示 -->
    <cube-popup type="my-popup" :mask="false" ref="popup">
      图片获取失败！
    </cube-popup>

    <!-- 九宫格 -->
    <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4" v-for="value in nav" :key="value.label">
        <router-link :to="value.path">
          <span :class="value.iconfont"></span>
          <div class="mui-media-body" v-text="value.label"></div>
        </router-link>
      </li>
    </ul>
  </div>  
</template>

<script>
export default {
  data() {
    return {
      items: null,
      nav: [
        {label: '新闻资讯', iconfont: 'mui-icon mui-icon-home', path: '/index/news'},
        {label: '图片分享', iconfont: 'mui-icon mui-icon-email', path: '/index/picture'},
        {label: '商品购买', iconfont: 'mui-icon mui-icon-chatbubble', path: '/index/goods'},
        {label: 'location', iconfont: 'mui-icon mui-icon-location', path: ''},
        {label: 'Search', iconfont: 'mui-icon mui-icon-search', path: ''},
        {label: 'Phone', iconfont: 'mui-icon mui-icon-phone', path: ''},
      ]
    }
  },
  methods: {
    changePage(current) {
    },
    clickHandler(item, index) {
    },
    // 获取轮播图
    getlunbo () {
      this.axios.get('/getlunbo')
      .then( res => {
        if (res.status !== 200) {
          this.showPopup('popup')
        }
        else {
          this.items = res.data.items
        }
      } )
      .catch(err => console.log('错误'))
    },
    // 图片获取失败提示
    showPopup(refId) {
      const component = this.$refs[refId]
      component.show()
      setTimeout(() => {
        component.hide()
      }, 2000)
    }
  },
  mounted () {
    this.getlunbo()
  }
}
</script>

<style lang="stylus" scoped>
// 轮播图
.cube-slide img
  width 100%
.cube-slide-dots
  // 小点样式初始化
  .my-dot
    font-size 12px
    background-color #eee
    width 5px
    height 5px
    border-radius 50%
    margin 0 3px
  .active
    background-color red
// 图片获取失败
.cube-my-popup >>> .cube-popup-content
  background-color rgba(0, 0, 0, .8)
  padding 20px
  color #fff

// 九宫格
.mui-table-view
  background-color #fff
  border none
  .mui-table-view-cell
    border none
</style>
